<template>
    <div class="sidebar">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>
            <template v-for="item in adminItems" v-if="item.permissions.includes(user.userType)">
                <template v-if="item.subs">
                    <el-submenu :index="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>{{ item.title }}</template>
                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index"
                            v-if="subItem.permissions.includes(user.userType)">{{
                            subItem.title}}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index">
                        <i :class="item.icon"></i>{{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>

    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                type: 0,
                uniName: "",
                adminItems: [
                    // 0、超级管理员;1、管理员（教委）;2、校方;3、课任教师;
                    {
                        icon: "el-icon-campus",
                        index: "1",
                        title: "校园系统",
                        permissions: [0],
                        subs: [
                            // {
                            //     index: "semester",
                            //     title: "学期管理",
                            //     permissions: [0]
                            // },
                            {
                                index: "school",
                                title: "学校管理",
                                permissions: [0]
                            },
                            {
                                index: "class",
                                title: "班级管理",
                                permissions: [0]
                            }
                        ]
                    },
                    {
                        icon: "el-icon-user",
                        index: "2",
                        title: "用户系统",
                        permissions: [0],
                        subs: [
                            {
                                index: "teacher",
                                title: "教师管理",
                                permissions: [0]
                            },
                            {
                                index: "student",
                                title: "学生管理",
                                permissions: [0]
                            },
                            // {
                            //     index: "parent",
                            //     title: "家长管理",
                            //     permissions: [0]
                            // }
                        ]
                    },
                    // {
                    //     icon: "el-icon-user",
                    //     index: "3",
                    //     title: "教改系统",
                    //     permissions: [0, 1, 2, 3],
                    //     subs: [
                    //         {
                    //             index: "educationalPlan",
                    //             title: "教改方案",
                    //             permissions: [0, 1, 2, 3]
                    //         },
                    //         {
                    //             index: "applicableSchools",
                    //             title: "适用学校",
                    //             permissions: [0, 1]
                    //         },
                    //         {
                    //             index: "dataStatis",
                    //             title: "数据统计",
                    //             permissions: [0, 1]
                    //         }
                    //     ]
                    // },
                    {
                        icon: "el-icon-admin",
                        index: "4",
                        title: "用户权限",
                        permissions: [0],
                        subs: [
                            {
                                index: "accountNumber",
                                title: "账号管理",
                                permissions: [0]
                            }
                        ]
                    },
                    {
                        icon: "el-icon-physical",
                        index: "5",
                        title: "体测系统",
                        permissions: [0, 1, 2, 3],
                        subs: [
                            {
                                index: 'benchmark',
                                title: '体测评分标准',
                                permissions: [0, 1, 2]
                            },
                            {
                                index: "physicalTest",
                                title: "体测管理",
                                permissions: [0]
                            },
                            {
                                index: "physicalScore",
                                title: "体测成绩",
                                permissions: [0, 2, 3]
                            },
                            {
                                index: 'statistics',
                                title: '体测数据统计',
                                permissions: [0, 1, 2]
                            },
                            {
                                index: 'statisDetail',
                                title: '体测统计详情',
                                permissions: [0, 1, 2, 3]
                            },
                            {
                                index: 'physicalReport',
                                title: '体测报告',
                                permissions: [0, 1, 2]
                            }
                        ]
                    },
                    {
                        icon: "el-icon-dataAnalysis",
                        index: "6",
                        title: "健康数据",
                        permissions: [0, 2, 3],
                        subs: [
                            {
                                index: 'healthRecord',
                                title: '学生健康档案',
                                permissions: [0, 2, 3]
                            },
                        ]
                    },
                    // {
                    //     icon: "el-icon-physical",
                    //     index: "6",
                    //     title: "体育课系统",
                    //     permissions: [0, 2, 3],
                    //     subs: [
                    //         {
                    //             index: 'peStandard',
                    //             title: '体育课评分标准',
                    //             permissions: [0, 2, 3]
                    //         },
                    //         {
                    //             index: "peScore",
                    //             title: "体育课成绩",
                    //             permissions: [0, 2, 3]
                    //         },
                    //         {
                    //             index: "peStatistics",
                    //             title: "体育课成绩统计",
                    //             permissions: [0, 2, 3]
                    //         }
                    //     ]
                    // },
                    {
                        icon: "el-icon-bind",
                        index: "7",
                        title: "手环管理",
                        // permissions: [0, 2, 3],
                        permissions: [0],
                        subs: [
                            {
                                index: 'bracelet',
                                title: '手环管理',
                                permissions: [0]
                            },
                            {
                                index: 'abnormalBrac',
                                title: '异常手环',
                                permissions: [0, 2, 3]
                            }
                        ]
                    },
                    // {
                    //     icon: "el-icon-physical",
                    //     index: "8",
                    //     title: "标签管理",
                    //     permissions: [0, 1],
                    //     subs: [
                    //         {
                    //             index: 'tags',
                    //             title: '标签管理',
                    //             permissions: [0, 1]
                    //         },
                    //         {
                    //             index: "suggestion",
                    //             title: "建议管理",
                    //             permissions: [0, 1]
                    //         }
                    //     ]
                    // },

                ],
            };
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace("/", "");
            },
            ...mapState({ user: state => state.user })
        },
        mounted() {
            // this.type = this.user.userType;
            // this.uniName = this.user.uniName;
        }
    };
</script>

<style>
    .sidebar {
        display: block;
        position: fixed;
        width: 180px;
        left: 0;
        top: 60px;
        bottom: 0;
        z-index: 150;
    }

    .sidebar>ul {
        height: 100%;
    }

    .el-icon-campus {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/campus_icon.png");
    }

    .el-icon-user {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/user_icon.png");
    }

    .el-icon-dataAnalysis {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/dataAnalysis_icon.png");
    }

    .el-icon-physical {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/physical_icon.png");
    }

    .el-icon-bind {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/bind_icon.png");
    }

    .el-icon-admin {
        width: 15px !important;
        height: 15px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/admin_icon.png");
    }

    .sidebar .el-menu {
        background: #333744;
        overflow: hidden;
    }

    .el-menu .el-menu-item {
        background: #333744;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: #ffffff !important;
    }

    .el-menu .el-menu-item:hover {
        background: #414556;
    }

    .sidebar .el-menu .el-submenu:hover,
    .sidebar .el-submenu__title:hover {
        background: #414556;
    }

    .sidebar .el-submenu__title {
        font-size: 12px;
        color: #ffffff !important;
        height: 40px !important;
        line-height: 40px !important;
        border-bottom: 1px solid #333744 !important;
        background: #333744;
    }

    .sidebar .is-active {
        background: #414556;
        color: #ffffff;
    }

    .el-menu--dark .el-submenu .el-menu .el-menu-item:hover {
        color: #ffffff;
    }
</style>